<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		/*在父类里面设置清除*/
		/*.one{
			overflow: hidden;
		}*/

		.aa{
			width: 100px;
			height: 50px;
			background-color: red;
			float: left;
		}

		.bb{
			width: 100px;
			height: 50px;
			background-color: yellow;
			float: left;
		}

		.cc{
			width: 100px;
			height: 50px;
			background-color: black;
			float: left;
		}

		.two{
			width: 100px;
			height: 50px;
			background-color: pink;
			/*在接近浮动元素得那个块设置清除*/
			/*clear: both;*/
		}

		.three{
			width: 100px;
			height: 50px;
			background-color: blue;
		}

		.four{
			width: 100px;
			height: 50px;
			background-color: purple;
		}
		/*最重要得一个方法*/
		/*.one:after{
			height: 0;
			content: "";
			display: block;
			clear: both;
		}*/
	
	</style>
</head>
<body>


	<div class = "one" >
		<div class = "aa"></div>
		<div class = "bb"></div>
		<div class = "cc"></div>
	</div>
	<div class = "two"></div>
	<div class = "three"></div>
	<div class = "four"></div>

	<!-- <div>11</div> -->
	
</body>
</html>